<!-- 考勤人员管理 -->
<template>
    <div class="AttendanceManagement">
      	<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
        	<el-form-item label="考勤组：">
        	    <el-select v-model="ruleForm.groupId" filterable >
        	        <el-option v-for="item in agrouplist"
        	                   :key="item.id"
        	                   :label="item.name"
        	                   :value="item.id">
        	        </el-option>
        	    </el-select>
        	</el-form-item>
        	<el-form-item label="角色：">
        	    <el-select v-model="ruleForm.roleId" filterable >
        	        <el-option v-for="item in rolelist"
        	                   :key="item.id"
        	                   :label="item.name"
        	                   :value="item.id">
        	        </el-option>
        	    </el-select>
        	</el-form-item>
	    	<el-form-item label="区域：">
	    	    <el-select v-model="ruleForm.regionId" filterable >
	    	        <el-option v-for="item in arealist"
	    	                   :key="item.id"
	    	                   :label="item.name"
	    	                   :value="item.id">
	    	        </el-option>
	    	    </el-select>
	    	</el-form-item>
			<el-form-item label="城市：">
			    <el-select v-model="ruleForm.cityId" filterable >
			        <el-option v-for="item in citys"
			                   :key="item.cityId"
			                   :label="item.city"
			                   :value="item.cityId">
			        </el-option>
			    </el-select>
			</el-form-item>
	    	<el-form-item label="姓名：">
	    		<el-input v-model.trim="ruleForm.nameOrMobileOrJobnumber" placeholder="姓名/手机号/员工号"></el-input>
	    	</el-form-item>
	    	<el-form-item>
	    		<el-button type="primary" @click="searchList" id="monitorEnter">查询</el-button>
	    		<el-button type="primary" @click="exporthander">导出</el-button>
	    		<el-button type="primary" @click="sethander">单双休设置</el-button>
	    	</el-form-item>
		</el-form>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column type="index" label="序号" width="50" fixed align="center"></el-table-column>
			<el-table-column label="姓名" prop="userName" align="center"></el-table-column>
			<el-table-column label="员工号" prop="jobNumber" align="center"></el-table-column>
			<el-table-column label="手机号" prop="mobile" align="center"></el-table-column>
			<el-table-column label="考勤组" prop="userGroupList" align="center">
				<template slot-scope="scope">
					<div v-if="scope.row.userGroupList.length > 0 && scope.row.userGroupList">	
						 <div class="pstyle" v-for="(item,index) in scope.row.userGroupList" @click="infohander(scope.row)"> 
						     <p class="pstyle" v-if="index<2">{{item.name}}</p>
						 </div>
						 <div class="pstyle" v-if="scope.row.userGroupList.length>2">
						     ...
						 </div>						
					</div>
			  		 <div class="pstyle" v-else >
			 		   ——
			 		 </div>
				</template>
			</el-table-column>
			<el-table-column label="角色" prop="roleName" align="center"></el-table-column>
			<el-table-column label="区域" prop="regionName" align="center"></el-table-column>
			<el-table-column label="城市" prop="cityName" align="center"></el-table-column>
			<el-table-column label="单双休" prop="restStatus" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="adjusthander(scope.row)">{{scope.row.restStatus | filterReststatus}}</el-button>
				</template>
			</el-table-column>
		</el-table>	
		<div class="pagebar">
		    <el-pagination
		            background
		            layout="total, sizes, prev, pager, next"
		            :current-page.sync="ruleForm.pageNum"
		            :page-sizes="[10, 20, 30, 40]"
		            :page-size="ruleForm.pageSize"
		            @size-change="handleSizeChange"
		            @current-change="handleCurrentChange"
		            :total="totalSize">
		    </el-pagination>
		</div>
		<el-dialog
		  title=""
		  :visible.sync="dialogVisible"
		  width="25%"
		  center
		  >
			<div style="text-align: center">
				<el-radio-group v-model="labelType">
				  <el-radio :label="0">单休</el-radio>
				  <el-radio :label="1">双休</el-radio>
				</el-radio-group>
			</div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="ensurehander">确 定</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  title=""
		  :visible.sync="dialogVisible2"
		  width="30%"
		  center
		  >
			<div style="margin-left: 30px;max-height: 300px;overflow-y:auto;" >
				<p v-for="item in currentdata.userGroupList">{{item.name}}</p>
			</div>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
		  </span>
		</el-dialog>
    </div>
</template>

<script>
import api from "@/api/apiPath"
import utils from "@/common/utils.js"

export default {
    name:"attendanceManagement",
    title:'考勤人员管理',
    data() {
        return {
        	dialogVisible: false,
        	dialogVisible2: false,
        	agrouplist:[],
        	rolelist:[],
        	arealist:[],
        	citys:[],
			tableData:[],
			currentdata:{},
			labelType:'',
        	ruleForm:{
        		cityId:undefined,
        		groupId:undefined,
        		roleId:undefined,
        		regionId:undefined,
        		nameOrMobileOrJobnumber:'',
        		pageNum: 1,
        		pageSize: 10,
        	},
        	totalSize: 0
        }
    },
    created() {
    	this.getgrouplist()//考勤组
    	this.loadCity()
    	this.getlist()
    	this.getarealist()//区域
    	this.getrolelist()//角色列表
    },
    activated(){
        this.searchList()
    },
    filters: {
    	filterReststatus(val){
    		if (val == 0) {
    			return '单休'
    		}else if(val == 1){
    			return '双休'
    		}else{
    			return '——'
    		}
    	}
    },
    methods: {
    	getarealist(){
    	    this.$axios.get('city/region/all').then(res=>{                
    	        this.arealist = res
    	        this.arealist.unshift({id:undefined,name:'全部'})
    	    })
    	},
    	getrolelist(){
    	    this.$axios.get('/checkin/clockstatus/getrolelist').then(res=>{
    	        this.rolelist = res
    	        this.rolelist.unshift({id:undefined,name:'全部'})

    	    })
    	},
    	getgrouplist(){
    	    this.$axios.get('/checkin/clockstatus/getgrouplist').then(res=>{
    	        this.agrouplist = res
    	        this.agrouplist.unshift({id:undefined,name:'全部'})
    	    })
    	},
    	getlist(){
    		this.$axios.post('/checkin/user/attendance/list',this.ruleForm).then(res=>{
    			this.tableData = res.list
    			this.totalSize = res.total
    		})
    	},
    	infohander(val){
			this.dialogVisible2 = true
			this.currentdata = val
    	},
    	adjusthander(val){
    		this.dialogVisible = true
    		this.labelType = val.restStatus
    		this.currentdata = val
    	},
    	ensurehander(){
			if (this.labelType == null) {
				this.$message({
					message:'请选择单双休',
					type:'warning'
				})	
				return			
			}
			let obj ={}
			if (this.labelType == 1) {//双休
				obj['pairs'] =[]
				obj['pairs'].push(this.currentdata.userId)
				obj['single'] =[]
			}else{
				obj['single'] =[]
				obj['single'].push(this.currentdata.userId)
				obj['pairs'] =[]
			}
			this.$axios.post('checkin/user/attendance/updaterest',obj).then(res=>{
			   this.$message({
			     message:'设置成功',
			     type:'success'
			   })
			   this.dialogVisible = false
			   this.getlist()
			})
    	},
    	handleCurrentChange() {
    	    this.getlist()
    	},
    	handleSizeChange(val) {
    	    this.ruleForm.pageSize = val
    	    this.getlist();
    	},
    	searchList(){
    		this.ruleForm.pageNum = 1
    		this.getlist()
    	},
    	exporthander(){
    		delete this.ruleForm.pageSize
    		delete this.ruleForm.pageNum
    		this.$axios.service({
    		  method: "post",
    		  url: '/checkin/user/attendance/list/download',
    		  data: this.ruleForm,
    		  headers: {
    		    "content-type": "application/json; charset=utf-8",
    		    token: sessionStorage.getItem("cmsUser")
    		      ? JSON.parse(sessionStorage.getItem("cmsUser")).tokenId
    		      : ""
    		  },
    		  responseType: "blob"
    		})
    		  .then(res => {
    		    this.downloadFile(res.data)
    		  })
    		  .catch(res => {
    		    this.downloadFile(res.data)
    		  });
    	},
    	// 导出
    	downloadFile(data) {
    	    let url = window.URL.createObjectURL(new Blob([data]));
    	    let link = document.createElement("a");
    	    let fileName = `导出${utils.getTimeString(new Date())}.xls`;
    	    link.style.display = "none";
    	    link.href = url;
    	    link.setAttribute("download", fileName);
    	    document.body.appendChild(link);
    	    link.click();
    	    URL.revokeObjectURL(link.href);
    	    document.body.removeChild(link);
    	    this.$message({
    	      message: "导出成功",
    	      type: "success"
    	    });
    	},
    	sethander(){
			this.$router.push({path:'/singleDoubleRestSet'})
    	},
    	loadCity(){
    		this.axios.post(api.CITYLIST).then(res => {
    			if (res.data.code !== 200) {
    				this.$message(res.data.msg)
    			}else {
    				this.citys = res.data.data.cityList
    				this.citys.unshift({id:undefined,city:'全部'})
    			}
    		})
    	},
    },
}
</script>
<style lang="stylus" scoped>

	.pstyle
	    margin: 0;
	    padding: 0;
	    color:blue;
</style>